﻿<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>地图范围查询</title>
        <style type="text/css">
            body{
                margin: 0;
                overflow: hidden;
                background: #fff;
            }
            #map{
                position: relative;
                height: 510px;
                border:1px solid #3473b7;
            }
            #toolbar {
                position: relative;
                padding-top: 5px;
                padding-bottom: 10px;
            }
        </style>
        <link href='./css/bootstrap.min.css' rel='stylesheet' />
        <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
        <script src='../libs/SuperMap.Include.js'></script>
        <script type="text/javascript">
            var map, local, layer, vectorLayer, control, queryBounds, markerLayer,drawFeature,
            style = {
                strokeColor: "#304DBE",
                strokeWidth: 1,
                pointerEvents: "visiblePainted",
                fillColor: "#304DBE",
                fillOpacity: 0.3
            },
            host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host,
            url=host+"/iserver/services/map-world/rest/maps/World";
            function init(){
                map = new SuperMap.Map("map",{controls: [
                    new SuperMap.Control.LayerSwitcher(),
                    new SuperMap.Control.ScaleLine(),
                    new SuperMap.Control.Zoom(),
                    new SuperMap.Control.Navigation({
                        dragPanOptions: {
                            enableKinetic: true
                        }
                    })]
                });
                layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, {transparent: true, cacheEnabled: true},{maxResolution:"auto"});
                layer.events.on({"layerInitialized":addLayer});
                vectorLayer = new SuperMap.Layer.Vector("Vector Layer");//新建一个vectorLayer的矢量图层
                markerLayer = new SuperMap.Layer.Markers("Markers");//创建一个有标签的图层

                drawFeature = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Box,{"handlerOptions":{"cursorCSS":"crosshair"}});
                drawFeature.events.on({"featureadded": drawCompleted});
                map.addControl(drawFeature);
            }

            function addLayer() {
                map.addLayers([layer, vectorLayer, markerLayer]);
                map.setCenter(new SuperMap.LonLat(0, 0), 0);
            }
            function drawGeometry() {
                //先清除上次的显示结果
                clearFeatures();

                drawFeature.activate();
            }

            function drawCompleted(obj){
                drawFeature.deactivate();
                var feature = obj.feature;
                feature.style = style;
                vectorLayer.addFeatures(feature);
                var queryBounds = feature.geometry.bounds;

                var queryParam, queryByBoundsParams, queryService;
                queryParam = new SuperMap.REST.FilterParameter({name: "Capitals@World.1"});//FilterParameter设置查询条件，name是必设的参数，（图层名称格式：数据集名称@数据源别名）
                queryByBoundsParams = new SuperMap.REST.QueryByBoundsParameters({queryParams: [queryParam], bounds: queryBounds});//queryParams查询过滤条件参数数组。bounds查询范围
                queryService = new SuperMap.REST.QueryByBoundsService(url, {
                    eventListeners: {
                        "processCompleted": processCompleted,
                        "processFailed": processFailed
                    }
                });
                queryService.processAsync(queryByBoundsParams);//向服务端传递参数，然后服务端返回对象
            }
            function processCompleted(queryEventArgs) {
                var i, j, result = queryEventArgs.result,marker;//queryEventArgs服务端返回的对象
                if (result && result.recordsets) {
                    for (i=0, recordsets=result.recordsets, len=recordsets.length; i<len; i++) {
                        if (recordsets[i].features) {
                            for (j=0; j<recordsets[i].features.length; j++) {
                                var f = recordsets[i].features[j];
                                var point = f.geometry,
                                        size = new SuperMap.Size(44, 33),
                                        offset = new SuperMap.Pixel(-(size.w/2), -size.h),
                                        icon = new SuperMap.Icon("../theme/images/marker.png", size, offset);
                                marker = new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon);
                                marker.sm_capital = f.attributes.CAPITAL;
                                marker.events.on({
                                    "click":openInfoWin,
									"touchstart":openInfoWin,        //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
                                    "scope": marker
                                });
                                markerLayer.addMarker(marker);
                            }
                        }
                    }
                }
            }
            function processFailed(e) {
                alert(e.error.errorMsg);
            }
            function clearFeatures() {
                vectorLayer.removeAllFeatures();
                markerLayer.clearMarkers();
                closeInfoWin();
            }
            var infowin = null;
            function openInfoWin(){
                closeInfoWin();
                var marker = this;
                var lonlat = marker.getLonLat();
                var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";
                contentHTML += "<div>"+marker.sm_capital+"</div></div>";
                var size = new SuperMap.Size(0, 33);
                var offset = new SuperMap.Pixel(0, -size.h);
                var icon = new SuperMap.Icon("../theme/images/marker.png", size, offset);
                var popup = new SuperMap.Popup.FramedCloud("popwin",
                        new SuperMap.LonLat(lonlat.lon,lonlat.lat),
                        null,
                        contentHTML,
                        icon,
                        true);

                infowin = popup;
                map.addPopup(popup);
            }
            function closeInfoWin(){
                if(infowin){
                    try{
                        infowin.hide();
                        infowin.destroy();
                    }
                    catch(e){}
                }
            }
        </script>
    </head>
    <body onload="init()">
        <div id="toolbar">
            <input type="button" class="btn" value="查询" onclick="drawGeometry()" />
            <input type="button" class="btn" value="清除" onclick="clearFeatures()" />
        </div>
        <div id="map"></div>
    </body>
</html>
